<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花样连接卡</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
       a{
       	background: pink;
       	display:block;
       	height:100px;
       	width:100px;
       	text-decoration: none;
       	text-align:center;
       	line-height: 100px;
       	color:white;
       }
       a:hover{
       	background: blue;
       }
       .a2{
       	position: relative;
       	left:200px;
       	bottom:100px;
       }
       .a4{
       	position:relative;
       	left:200px;
       	bottom:100px;
       }
       .a5{
       	position:relative;
       	left:100px;
       	bottom:300px;
       }
      
       
    </style>
</head>

<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>
